import { BattleValue } from '@/types/sun'
import React from 'react'

type Top30TableProps = {
  out: BattleValue[]
  received: BattleValue[]
}

type DamageTableProps = {
  title: string
  data: BattleValue[]
  rowClass: string
}

const DamageTable: React.FC<DamageTableProps> = ({ title, data, rowClass }) => (
  <div>
    <h2 className="rounded-t-xl border-b bg-gray-100 text-center text-sm font-semibold text-gray-600">
      {title}
    </h2>
    <div className="overflow-x-auto rounded-b-xl border border-gray-200">
      <table className="min-w-full text-sm">
        <thead>
          <tr className="bg-gray-50">
            <th className="border-b border-r px-2 py-1 font-medium text-gray-700">
              时间
            </th>
            <th className="border-b border-r px-2 py-1 font-medium text-gray-700">
              技能
            </th>
            <th className="border-b border-r px-2 py-1 font-medium text-gray-700">
              玩家
            </th>
            <th className="border-b px-2 py-1 font-medium text-gray-700">
              伤害
            </th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index} className={index % 2 === 0 ? 'bg-white' : rowClass}>
              <td className="whitespace-nowrap border-b border-r px-2 py-1 text-center text-gray-600">
                {item.time_s.split('.')[0]}
              </td>
              <td className="whitespace-nowrap border-b border-r px-2 py-1 text-center text-gray-800">
                {item.skill}
              </td>
              <td className="whitespace-nowrap border-b border-r px-2 py-1 text-center text-gray-800">
                {item.target}
              </td>
              <td className="whitespace-nowrap border-b px-2 py-1 text-left text-gray-900">
                {item.value.toLocaleString()}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
)

const Top30Table: React.FC<Top30TableProps> = ({ out, received }) => {
  const hasOutData = out.length > 0
  const hasReceivedData = received.length > 0

  const containerClass =
    hasOutData && hasReceivedData
      ? 'md:grid-cols-2 grid-cols-1'
      : 'grid-cols-1 justify-center'

  return (
    <div className="mx-auto mb-4 w-full max-w-4xl">
      <div className={`grid ${containerClass} gap-4`}>
        {hasOutData && (
          <DamageTable
            title="输出最大伤害"
            data={out}
            rowClass="bg-green-100"
          />
        )}
        {hasReceivedData && (
          <DamageTable
            title="承受最大伤害"
            data={received}
            rowClass="bg-red-100"
          />
        )}
      </div>
    </div>
  )
}

export default Top30Table
